<template>
  <Container :formId="formId" :widget-data="widgetObj" :templete-name="formName" @save="handleSave"/>
</template>

<script>
import FormTempleteStore from '../tool/FormTempleteStore'
import { v4 as uuidv4 } from 'uuid';
export default {
  name: "Home",
  data() {
    return {
      formName: '',
      formId: '',
      widgetObj: '{"list": []}',
    }
  },
  created(){
    console.log(this.$route);
    if (this.$route.params.formId) {
      this.formId = this.$route.params.formId;
      this.getFormData(this.formId);
    }
  },
  methods: {
    setFormData(widgetJSON) {
      this.widgetObj = widgetJSON;
    },
    getFormData(formId) {
      FormTempleteStore.read(formId).then((data) => {
        this.formName = data.name;
        this.setFormData(data.formTemplete)
      }).catch((err) => {
        console.log(err.message)
      })
    },
    handleSave(formData) {
      if (this.formId) {
        FormTempleteStore.update(formData).then((res) => {
          this.$message.success(res)
        })
      } else {
        FormTempleteStore.add({...formData, id: uuidv4()}).then((res) => {
          this.$message.success(res)
        })
      }
    }
  }
};
</script>
